<template>
	<view class="job">
		<!-- 		<view class="commonBox topBox" style="padding-bottom: 0;">
			<van-search :value="value" placeholder="请输入加工工艺关键词搜索" shape="round" @search="onSearch" @change="onChange"
				@cancel="onCancel" />
		</view> -->
		<view class="xPopupTitle" @click="yinc(0)"> 加工工艺 </view>
		<view class="scrollBox" :style="{height:`600rpx`}" v-if="status">
			<scroll-view scroll-y="true" :style="{height:`600rpx`}" style="background-color: #F6F6F6;width: 265rpx;">
				<view v-for="(item,index) in lists" :key="index" class="leftList" @click="choosed = index"
					:class="{choosedLeftList:choosed == index}">
					<view class="leftListName">
						{{item.name}}
					</view>
					<view class="leftListNum" v-if=" childrenLength(item) != 0 ">
						{{ childrenLength(item) }}
					</view>
				</view>
			</scroll-view>
			<scroll-view v-if="lists[choosed]" scroll-y="true" :style="{height:`600rpx`}"
				style="background-color: #FFF;width: 485rpx;">
				<view class="" style="height: 22rpx;">
				</view>
				<view v-for="(item,index) in lists[choosed].children" :key="index" class="rightList"
					@click="submit(item.id)" :class="{ choosedTechnology : choosedTechnology(item.id) }">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<!-- <view class="scrollBox" :style="{height:`600rpx`}" v-else @click="yinc(0)" >
			<scroll-view :style="{height:`600rpx`}" scroll-y="true" @scroll="onScroll">
				<view v-for="(item,index) in lists" :key="index"
					style="font-weight: bold;display: flex;justify-content: center;">

					<view :class="{ choosedTechnology : choosedTechnology(item.id) }" class="rightList"
						@click="submit(item.id)">
						{{item.name}}
					</view>
					<view class="">
						<view v-show="showChildren(item.id)" class="erji">
							<view v-for="(child, childIndex) in item.children" :key="childIndex"
								style="font-size: 11px; color: gray;">
								<view>
									{{ child.name }}
								</view>
							</view>
						</view>
						
						<view class="details_info" @click.stop="showInfo(item.id)">
							<image src="https://wx.xtwaixie.com/img/info.png" mode="aspectFill"></image>
						</view>
				
					</view>
					
				</view>
				<view class="" style="height: 140rpx;">
					
				</view>
			</scroll-view>
		</view> -->
		<!-- <view v-for="(item,index) in lists" :key="index"  >
			<view v-show="showChildren(item.id)" class="erji">
				<view v-for="items in item.children" style="font-size: 11px;color: gray;">
					<view>
						{{items.name}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="scrollBox" :style="{height:`600rpx`}" v-else @click="yinc(0)">
			<scroll-view :style="{height:`600rpx`}" scroll-y="true">
				<view v-for="(item,index) in lists" :key="index"
					style="font-weight: bold;display: flex;justify-content: center;">
					<!-- {{item.name}} -->
					<view :class="{ choosedTechnology : choosedTechnology(item.id) }" class="rightList"
						@click="submit(item.id)">
						{{item.name}}
						<view v-show="showChildren(item.id)" :class="item.id == '15' ? 'shiwu erji' : item.id == '14' ? 'yisi erji' : 'erji'">
							<view v-for="(child, childIndex) in item.children" :key="childIndex"
								style="font-size: 11px;">
								<view>
									{{ child.name }}
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="">
						<view v-show="showChildren(item.id)" class="erji">
							<view v-for="(child, childIndex) in item.children" :key="childIndex"
								style="font-size: 11px; color: gray;">
								<view>
									{{ child.name }}
								</view>
							</view>
						</view>
					</view> -->
					<view class="">
						<view class="details_info" @click.stop="showInfo(item.id)">
							<image src="https://wx.xtwaixie.com/img/info.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="submitBtn" @click="agree">
			<view> 确定 </view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			technologyList: Array,
			lists: Array,
			status: {
				type: Boolean,
				default: true
			},
			maxCount:{
				type:Number,
				default: 0
			}
		},
		data() {
			return {
				searchList: [],
				choosed: 0,
				value: '',
				ids: '',
				isHidden: true
			}
		},
		onReady() {
			this.searchList = this.technologyList
		},
		onLoad() {},
		methods: {
			getClassName(id) {
				if(id=='15'){
					return 'shiwu'
				}
			},
			onScroll(event) {
				this.ids = 0
			},
			showInfo(id) {
				console.log(id);
				this.ids = id
			},
			showChildren(id) {
				return id == this.ids
			},
			yinc(y) {
				this.ids = y
			},
			agree() {
				let nameList = []
				if (this.status) {
					this.lists.forEach(res => {
						res.children.forEach(item => {
							if (this.searchList.includes(item.id)) {
								nameList.push(item.name)
							}
						})
					})
				} else {
					this.lists.forEach(item => {
						if (this.searchList.includes(item.id)) {
							nameList.push(item.name)
						}
					})
				}
				this.$emit('agree', this.searchList, nameList)
			},
			childrenLength(item) {
				return item.children.filter(res => this.searchList.includes(res.id)).length
			},
			submit(id) {
				console.log(id)
				if(this.maxCount != 0){
					if(this.searchList.length >= this.maxCount && !this.searchList.includes(id)){
						uni.showToast({
							title:`工艺最多选${this.maxCount}种`,
							icon:'none'
						})
						return
					}
					if (this.searchList.includes(id)) {
						this.searchList = this.searchList.filter(res => res != id)
					} else {
						this.searchList.push(id)
					}
				} else {
					if (this.searchList.includes(id)) {
						this.searchList = this.searchList.filter(res => res != id)
					} else {
						this.searchList.push(id)
					}
				}
				
			},
			choosedTechnology(id) {
				let result = this.searchList.includes(id)
				return result
			}
		}
	}
</script>
<style lang="scss" scoped>
	.scrollBox {
		overflow: visible !important;
		/* 允许内部元素不被裁剪 */
	}

	.erji {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.25);
		z-index: 999999999;
		// bottom: 0rpx;
		right: 2%;
		border-radius: 10px 10px;
		padding: 10px 10px;
		line-height: 20px;
		text-align: center;
		color: white;
	}

	.shiwu {
		bottom: -540rpx;
	}
	
	.yisi{
		bottom: -400rpx;
	}

	.xPopupTitle {
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		padding: 30rpx 0 30rpx;
	}

	.job {
		position: relative;

		.details_info {
			// position: absolute;
			// right: 100rpx;
			// top: 50%;
			// transform: translateY(-50%);
			width: 45rpx;
			height: 45rpx;
			margin-top: 12rpx;
			margin-left: 12rpx;

			&>image {
				width: 100%;
				height: 100%;
			}
		}

		.submitBtn {
			height: 130rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				background-color: #1050c7;
				width: 690rpx;
				font-weight: 500;
				color: #FFF;
				text-align: center;
				font-size: 32rpx;
				line-height: 96rpx;
				border-radius: 200rpx;
			}
		}

		.fixedBox {
			position: fixed;
			height: 150rpx;
			width: 750rpx;
			box-sizing: border-box;
			bottom: 0;
			left: 0;
			z-index: 9999;
			background-color: #FFF;
			padding: 0 30rpx;
			display: flex;
			box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(0, 0, 0, 0.1);
			align-items: center;

			.submit {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				position: relative;
				width: 688rpx;
				text-align: center;
				line-height: 85rpx;
				background: #000000;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}

		.inputType {
			margin: 0 auto 22rpx;
			width: 690rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			border-bottom: 1rpx solid #F7F7F7;

			.inputTypeTitle {
				font-size: 26rpx;
				color: #000000;
				line-height: 1.5;
			}

			.inputTypeSubTitle {
				line-height: 1.5;
				font-size: 24rpx;
				color: #C8C8C8;
			}
		}

		.scrollBox {
			display: flex;

			.rightList {
				margin: 0 10rpx 20rpx;
				width: 421rpx;
				line-height: 66rpx;
				background: #F7F7F7;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-size: 26rpx;
				color: #000000;
				text-align: center;
				border: 2rpx solid #F7F7F7;
				transition: all .3s linear;
				font-weight: lighter;
			}

			.choosedTechnology {
				color: #FFF;
				background-color: #1050c7;
			}

			.choosedRightList {
				border: 2rpx solid #1050c7;
				background: #EDF9FB;
				color: #1050c7;
			}

			.leftList {
				width: 265rpx;
				min-height: 93rpx;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				position: relative;
				font-size: 26rpx;
				color: #6A6A6A;
				transition: all .3s linear;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.leftListName {
					line-height: 1.8;
					width: 80%;
				}

				.leftListNum {
					width: 20%;
					text-align: right;
				}
			}

			.leftList::after {
				content: '';
				position: absolute;
				left: 0%;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 37rpx;
				transition: all .3s linear;
				background: #00000000;
			}

			.choosedLeftList {
				background: #FFFFFF;
				color: #1050c7;
			}

			.choosedLeftList::after {
				background: #1050c7;
			}
		}

		.jobInput {
			width: 100%;
			display: flex;
			align-items: center;
			height: 61rpx;
			background: #F6F6F6;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			box-sizing: border-box;
			padding: 0 23rpx;

			.select {
				width: 29rpx;
				margin-right: 14rpx;
			}
		}
	}
</style>